import React, { Component } from 'react'
import "./List.scss"
import hufu from "../images/hufu.jpg"
import caizhuang from "../images/caizhuang.jpg"
import xiangfen from "../images/xiangfen.jpg"
import jiu from "../images/jiu.jpg"
import guojiu from "../images/guojiu.jpg"
import jinpin from "../images/jinpin.jpg"
import baihuo from "../images/baihuo.jpg"
import muying from "../images/muying.jpg"
import zhibo from "../images/zhibo.jpg"
import temai from "../images/temai.jpg"

import { withRouter } from 'react-router-dom'
import { dianpulist } from '../utils/api'

 class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      arr: [
        // { name: "护肤", pic: hufu },
        // { name: "彩妆", pic: caizhuang },
        // { name: "香氛", pic: xiangfen },
        // { name: "进口酒", pic: jiu },
        // { name: "国产酒", pic: guojiu },
        // { name: "精品奢货", pic: jinpin },
        // { name: "食品百货", pic: baihuo },
        // { name: "母婴专区", pic: muying },
        // { name: "直播专区", pic: zhibo },
        // { name: "特卖专场", pic: temai },

      ],
      title:"1分抵1元。请点击此处查看《购物须知》。"
    }
  }
  componentDidMount(){
    dianpulist().then((ok)=>{
      console.log(ok.data.list)
      this.setState({arr:ok.data.list})
    })
  }
  render() {
    return (
      <div className='list'>
        <div className='title'>{this.state.title}</div>
        {
          this.state.arr.map((item) => {
            return (
              <div className='cate'>
                <img src={item.pic} alt="" />
                <div className='name'>{item.name}</div>
              </div>
            )
          })
        }

      </div>
    )
  }
}
export default withRouter(List)